<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{login.tile.tip}"></title>
    <script th:inline="javascript">
        $(function () {
            //登陆
            $("#login-submit-id").click(function (event) {

                var input = $("#login-form-id .form-group > input");
                var flag = input.verification();
                if (!flag) {
                    return;
                }
                $("#login-form-id").submit();
            });
            //注册
            $("#regist-rename-form-id").ajaxForm({
                dataType: "json",
                success: function (data) {
                    message(/*[[#{user.re.success}]]*/'');
                },
                error: function () {
                    message(/*[[#{user.re.fail}]]*/'');

                },
                complete: function (response, status) {

                }
            });
            $("#regist_name-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{login.register}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            var flag = $("#regist-rename-form-id.form-group input").verification();
                            if (!flag) {
                                return;
                            }

                            $("#regist-rename-form-id").submit();
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
            $("#login-register-id").click(function (event) {
                $("#regist_name-dialog-id").dialog("open");
            });
        });//ready
    </script>
    <style>
        .lang {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .form-group > .form-inline {
            width: 270px !important;
        }

        .form-group > .btn-success {
            text-align: center;
        }

        .form-group > .btn-register {
            text-align: center;
            background-color: #00b1ef;
        }

        .main-logo {
            width: 168px;
            height: 50px;
        }
    </style>
</head>
<body>
<div>

    <img class="main-logo" th:if="${session.siteLanguage} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img class="main-logo" th:if="${session.siteLanguage} neq 'en'" th:src="@{/assets/images/logo_zh.png}">

    <div class="lang">
        <a th:href="@{/login/login(siteLanguage=zh)}" th:text="#{login.chinese}"></a>
        <a th:href="@{/login/login(siteLanguage=en)}" th:text="#{login.english}"></a>
    </div>
</div>

<div style="display: flex;flex-direction: row">
    <img th:src="@{/assets/images/pic.png}" style="flex-grow: 1">
    <div style="flex-basis: 300px">
        <form id="login-form-id" th:action="@{/login/verification}" method="post">
            <div class="form-group">
                <input class="form-inline" type="text" name="username" reg="^.{1,50}$">
                <span><i class="fa fa-user"></i></span>
            </div>
            <div class="form-group">
                <input class="form-inline" type="password" name="password" reg="^.{1,50}$">
                <i class="fa fa-lock"></i>
            </div>
            <div class="form-group">
                <a id="login-submit-id" class="form-control form-inline btn-success" href="#"
                   th:text="#{login.submit}"></a>
            </div>
            <div class="form-group">
                <a id="login-register-id" class="form-control form-inline btn-register" href="#"
                   th:text="#{login.register}"></a>
            </div>
        </form>
    </div>

</div>
//注册
<div id="regist_name-dialog-id" style="display: none">
    <form id="regist-rename-form-id" th:action="@{/user/insertUserInfo}" method="post">
        <div class="form-group">
            <span th:text="#{user.nick}"></span>
            <input class="form-control" id="regist_name-dialog-nickN" name="userName"></input>
        </div>
        <div class="form-group">
            <span th:text="#{user.pass}"></span>
            <input class="form-control" id="regist_name-dialog-pass" name="password" type="password"></input>
        </div>
        <div class="form-group">
            <span th:text="#{user.email}"></span>
            <input class="form-control" id="regist_name-dialog-email" name="email"></input>
        </div>
        <div class="form-group">
            <span th:text="#{user.mobile}"></span>
            <input class="form-control" id="regist_name-dialog-mobile" name="mobile"></input>
        </div>
        <div class="form-group">
            <span th:text="#{user.tru.name}"></span>
            <input class="form-control" id="regist_name-dialog-trueN" name="niceName"></input>
        </div>
    </form>
</div>
</body>
</html>
